<template>
  <div class="my">
    <!-- 头部导航 -->
      <headerC :islogin="islogin" @updateType="clickHeadernav"></headerC>
    <div v-if="islogin">
      <!-- 用户信息状态 -->
      <stateC></stateC>
      <div class="bottom">
        <!-- 用户信息卡片 -->
        <div>
          <usermsgcardC :times="times"></usermsgcardC>
          <muchartice :mucharticeAPIlist="mucharticeAPIlist" title="最火文章"></muchartice>
          <muchartice :mucharticeAPIlist="mucharticeAPIlist" title="最新文章"></muchartice>
        </div>

        <!-- list列表 -->
        <div class="right">
          <div class="header">
            <ul>
              <li v-for="item in arry" :key="item.id" :class="{'header-nav': true, 'curr-header-nav': type === item.router}" @click="clickHeadernav(item.router, item.id)"> {{ item.name }} </li>
              <li>
                <el-input size="mini" placeholder="搜索他的内容" prefix-icon="el-icon-search"></el-input>
              </li>
            </ul>
          </div>
          <!-- 中间件的过度 -->
          <div class="rght-bottom">
            <like :type="type"></like>
          </div>
        </div>
      </div>
    </div>
    <div v-else-if="!islogin" class="islogin">
      <h1>
        请登录后查看
      </h1>
    </div>
  </div>
</template>

<script>
import stateC from '../../../components/stateC'
import usermsgcardC from '../../../components/usermsgcardC'
import like from '../../../components/link'
import headerC from '../../../components/harderC'
import muchartice from '../../../components/muchartice'
import { mucharticeAPI } from '../../../api/blog'
export default {
  components: {
    stateC,
    usermsgcardC,
    like,
    headerC,
    muchartice
  },
  data () {
    return {
      arry: [
        {
          id: 0,
          name: '我的文章',
          router: 'blog'
        },
        {
          id: 1,
          name: '我的收藏',
          router: 'collect'
        },
        {
          id: 2,
          name: '我的关注',
          router: 'attention'
        },
        {
          id: 3,
          name: '我的粉丝',
          router: 'fans'
        },
        {
          id: 4,
          name: '我的点赞',
          router: 'praise'
        }
      ],
      type: 'blog',
      // 传输给usermsgcard的数据
      times: '2016-12-25',
      // 判断是否登录
      islogin: false,
      mucharticeAPIlist: []
    }
  },
  methods: {
    clickHeadernav(router) {
      this.type = router
    },
    islogins() {
      // 判断是否登录的函数
      const _this = this
      this.ifJSONParse()
        ? _this.islogin = true
        : null
    },
    ifJSONParse() {
      // 判断本地储存
      return JSON.parse(window.localStorage.getItem('user'))
        ? true
        : false
    },
    async Apimuchartice() {
      const res = await mucharticeAPI()
      this.mucharticeAPIlist = res.data.list
    }
  },
  mounted() {
    this.$store.commit('updateisdisheaderC', true)
    this.islogins()
    this.Apimuchartice()
    // console.log(this.$route.params);
    this.$route.params.type
      ? this.type = this.$route.params.type
      : this.type = 'blog'
  }
}
</script>

<style lang="scss" scoped>
.my{
  padding: 0 0 420px 0;
  background-color: rgb(69, 87, 87);
}

.bottom {
  padding:30px 40px;
  display: flex;
  justify-content: center;
  gap: 100px;
  .right{
    width: 820px;
    // background-color: red;
    .header{
      ul {
        display: flex;
        width: 100%;
        height:35px;
        justify-content: space-evenly;
        align-items: center;
        background-color: white;
        border-radius: 5px;
        box-shadow: 0px 0px 10px -2px rgb(192, 192, 192);
        .header-nav{
          color: rgb(71, 71, 71);
          user-select: none;
          cursor: pointer;
        }
        li {
          padding: 5px 15px;
        }
      }
    }
  }
}

.curr-header-nav {
  border-bottom: 3px solid skyblue;
}
.islogin{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  color: #fff;
}
</style>